<template>  
    <div >docx-test
        <div ref="ele" style="width:14.64cm; height:14.64cm;background:blue;">ceshineirong</div>
        <el-button @click="handleExport">word</el-button>
    </div>
</template>
<script setup>
import { ref } from 'vue';
import {
    Document,
    Packer,
    Paragraph,
    Table,
    TableCell,
    TableRow,
    AlignmentType,
    VerticalAlign,
    ImageRun,
    Media
} from "docx";
// import { TimestampToDate2, TimestampToTime } from './olutils';
import html2canvas from 'html2canvas';
 
const ele = ref();
async function CreateResultReport( ) {
   
    // 使用了 docx 库来创建一个 Word 文档对象 (Document)，并在文档中添加了一些内容，包括文字、图片、表格。
    let url = await renderElement(ele.value);

    const doc = new Document({
        sections: [
            {
                children: [
                    // 第一段：添加描述内容，使用制表符（\t）做缩进
                    new Paragraph({
                        text: "\t" + 'hello world',
                    }),
 
                    // 第二段：空段落，用于分隔或增加空白
                    new Paragraph({ text: '22222' }),
 
                    // 第三段：包含图片，设置图片居中
                    new Paragraph({
                        // alignment: AlignmentType.CENTER, // 设置图片居中
                        children: [
                            new ImageRun({
                                type: "png",
                                data:url,
                                transformation: {
                                    width: 553,     // 图片宽度设置为 400 像素
                                    height: 400,    // 图片高度设置为 240 像素
                                },
                            }),
                            new ImageRun({
                                type: "png",
                                data:url,
                                transformation: {
                                    width: 553,     // 图片宽度设置为 400 像素
                                    height: 400,    // 图片高度设置为 240 像素
                                },
                            }),
                        ],
                    })
 
                ],
            },
        ],
    });
    Packer.toBlob(doc).then((blob) => {
        console.log('blob...', blob);
        const link = document.createElement("a");  // 创建一个链接元素 <a>，用于下载文件
        link.href = URL.createObjectURL(blob);     // 使用 URL.createObjectURL() 方法创建一个指向 Blob 对象的临时 URL
        link.download = 'a.docx';      // 设置下载文件的名称，使用 `reportName` 变量作为文件名
        link.click();                              // 模拟点击该链接，触发下载
    });
}
async function renderElement(element) {
    let canvas = await html2canvas(element, {
        useCORS: true,                                                             // 允许跨域加载图片
        scale: window.devicePixelRatio < 1.6 ? window.devicePixelRatio : 1.4,      // 根据设备像素比调整截图分辨率
        allowTaint: true,                                                          // 允许渲染跨域图片到 Canvas（可能有安全隐患）
    });
    return canvas.toDataURL('image/png');
}
 
function handleExport(){
    CreateResultReport();
}
</script>